<template>
	<div class="alarm-trend">
		<!-- <div v-if="props.loading" class="loading-page">
			<a-spin size="large" tip="加载中..." />
		</div> -->
		<div class="trend">
			<div id="trendCharts" :style="{ width: '549px', height: '166px' }"></div>
		</div>
	</div>
</template>

<script setup lang="ts" name="AlarmTrend">
import * as echarts from 'echarts';

// 具体统计类型
type _tsTrendData = {
	dayDate: string;
	alarmCount: string;
};
type _tsProps = {
	loading: boolean;
	trendData: Array<_tsTrendData>;
};

const props = withDefaults(defineProps<_tsProps>(), {
	loading: false,
	trendData: () => []
});
// 折线图
const myTrendCharts: any = ref('');

const trendCharts = (): void => {
	const option = {
		xAxis: {
			type: 'category',
			data: props.trendData.map((d: Record<string, any>) => d.dayDate),
			axisTick: {
				show: false
			},
			axisLabel: {
				normal: {
					textStyle: {
						color: 'rgba(255, 255, 255, 0.6)'
					}
				},
				// 默认x轴字体大小
				fontSize: 12,
				// margin:文字到x轴的距离
				margin: 6,
				height: 17,
				color: 'rgba(255, 255, 255, 0.6)'
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: 'rgba(255, 255, 255, 0.1)'
				}
			}
		},
		yAxis: {
			type: 'value',
			name: '单位（次）',
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(255, 255, 255, 0.1)'
				}
			}
		},
		grid: {
			top: 40,
			left: 70,
			right: 40,
			bottom: 20
		},
		series: [
			{
				data: props.trendData.map((d: Record<string, any>) => d.alarmCount),
				type: 'line',
				smooth: true,
				symbolSize: 1,
				lineStyle: {
					width: 3,
					color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
						{
							offset: 0,
							color: '#21F1F1'
						},
						{
							offset: 1,
							color: '#165DFF'
						}
					])
				}
			}
		]
	};
	nextTick(() => option && myTrendCharts.value.setOption(option));
};
const watchStop = watch(
	() => props.trendData,
	() => {
		trendCharts();
	},
	{
		immediate: true,
		deep: true
	}
);
onMounted(() => {
	const trendDom = document.getElementById('trendCharts');
	myTrendCharts.value = echarts.init(trendDom); // 初始化echarts实例
});
onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.alarm-trend {
	.loading-page {
		position: absolute;
		top: 0;
		z-index: 9999;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background-color: rgba(23, 40, 69, 0.96);
		transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		align-items: center;
		justify-content: center;
		backdrop-filter: saturate(244%) blur(5px);

		.ant-spin {
			color: rgba(24, 104, 233, 0.65);
			transform: scale(0.8);
		}
	}

	#trendChart {
		margin: 12px auto 0;
	}
}
</style>
